<template>
    <div>
        <div class="index-background" v-if="flagPic==='Index'&&backPic==='index'">
            <div class="ground">
                <div style="width: 520px;height: 285px;display: flex;justify-content: center;align-items: center">
                    <div><img id="img"
                              style="height: 100px;width: 100px;border-radius: 50px;margin-left: 23px;transition: all 1s"
                              src="../assets/QQ头像.png"
                              alt="">
                        <h1 style="color: #ffffff">Kurococ Liu</h1>
                        <div style="border: 1px solid black"></div>
                        <p style="text-align: center;color: #ffffff;font-size: 18px;margin-top: 20px">被子外面很危险！</p></div>
                </div>
                <div style="position: absolute;top: 86vh">
                    <div @click="roll"
                         style="width: 100px;height:180px;display: flex;flex-direction: column;align-items: center;font-size: 35px;color: #ffffff">
                        <i class="el-icon-bottom"></i>
                    </div>
                </div>
            </div>
            <!--            <el-image :src="require('../assets/background/1.jpg')"-->
            <!--                      style="height: 100vh;width: 100%;position: relative"></el-image>-->
            <!--            <div class="background-middle"><img style="width: 100px;height: 100px;border-radius: 50px"-->
            <!--                                                src="../assets/QQ头像.png.png" alt=""></div>-->

        </div>
        <el-container>
            <el-header>
                <div class="head" style="display: flex">
                    <el-menu :router="true" style="position: relative;width: 100%" :default-active="activeIndex"
                             class="el-menu-demo"
                             mode="horizontal">
                        <el-menu-item index="index"><i class="el-icon-s-flag"></i> 首页</el-menu-item>

                        <el-menu-item index="category"><i class="el-icon-folder"></i> 文章分类</el-menu-item>
                        <el-menu-item index="tag"><i class="el-icon-collection-tag
"></i> 标签
                        </el-menu-item>
                        <el-menu-item index="archive"><i class="el-icon-suitcase"></i> 文章归档</el-menu-item>
                        <el-menu-item index="interaction"><i class="el-icon-umbrella"></i> 互动</el-menu-item>
                        <el-menu-item index="admin"><i class="el-icon-s-promotion"></i>后台管理</el-menu-item>
                        <el-menu-item style="" index="write"><i class="el-icon-edit"></i>写文章
                        </el-menu-item>
                        <el-menu-item style="">
                            <el-input v-model="keyWords" placeholder="Search..."></el-input>
                            <el-button @click="userIndex" size="small" icon="el-icon-search"></el-button>

                        </el-menu-item>

                        <el-menu-item v-if="flag===false" index="login" style="left: 1200px;position: absolute"><i
                                class="el-icon-loading"></i>登录
                        </el-menu-item>
                        <el-menu-item v-if="flag===false" index="register" style="left: 1300px;position: absolute">注册
                        </el-menu-item>
                        <el-menu-item v-if="flag===true" style="left: 500px;position: relative">
                            <el-image
                                    style="width: 40px; height: 40px;border-radius: 20px;margin-right: 10px"
                                    :src="user.avatar"
                                    :preview-src-list="[user.avatar]"
                            ></el-image>
                            <el-dropdown @command="handleCommand">
                                <!--        71 40-->
                                <span class="el-dropdown-link">
    {{user.nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="a">个人信息</el-dropdown-item>
                                    <el-dropdown-item command="b">修改信息</el-dropdown-item>
                                    <el-dropdown-item command="f">个人收藏</el-dropdown-item>
                                    <el-dropdown-item command="e">个人中心</el-dropdown-item>
                                    <el-dropdown-item command="d" style="position: relative">
                                        <span v-if="thumbsvisabled"
                                              style="right: 8px;line-height: 16px;text-align: center;top: -2px;color: #ffffff;'font-size: 12px;width: 16px;height: 16px;background-color: #FA5A57;border-radius: 8px;position: absolute;">{{thumbsCount}}</span>
                                        收到的赞
                                    </el-dropdown-item>
                                    <el-dropdown-item command="c">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-menu-item>
                        <!--                        <el-menu-item v-if="flag===false" index="login" style="left: 800px;position: relative">登录-->
                        <!--                        </el-menu-item>-->

                    </el-menu>


                </div>
            </el-header>
            <el-main style="margin: 0;background-color: #F5F5F5">
                <router-view :keyWords="keyWords" ref='child'/>
                <!--                因为，要进行二次路由，所以要在这进行跳转，因为头部是共用的。所以，-->
            </el-main>
            <el-footer style="margin: 0!important;">
                <div style="text-align: center">
                    <el-card style="font-size: 13px;color: #303133;font-weight: 200">
                        <p>桂ICP备2021005110号</p>
                        <p>© 2021 江直树</p>
                        <p>Powered By jzs v1.4.8 • Theme By SKYBLUE</p>
                    </el-card>
                </div>
            </el-footer>
        </el-container>
        <!--        个人信息-->
        <el-dialog
                title="个人信息"
                :visible.sync="dialogVisible"
                width="50%"
        >
            <el-descriptions title="用户信息">
                <el-descriptions-item label="用户名">{{user.username}}</el-descriptions-item>
                <el-descriptions-item label="居住地">{{user.location}}</el-descriptions-item>
                <el-descriptions-item label="备注">
                    <el-tag size="small">{{user.remark}}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
        <!--        修改个人信息-->
        <el-dialog
                @close="closeDia('formRef')"
                title="修改个人信息"
                :visible.sync="dialogVisibleUpdate"
                width="40%"
        >
            <el-form ref="formRef" :rules="rules" :model="user" label-width="120px">
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="user.nickname"></el-input>
                </el-form-item>
                <el-form-item label="位置" prop="location">
                    <el-input v-model="user.location"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="password">
                    <el-input placeholder="新密码可以为空" type="password" v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="user.remark"></el-input>
                </el-form-item>
                <el-upload
                        class="upload-demo"
                        action="http://localhost:8888/admin/type/upload"

                        multiple
                        :limit="3"
                        :on-success="uploadEdit"
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form>

            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('formRef')">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import jwtDecode from 'jwt-decode'
    // import Global from "../assets/js/Global";
    import Global from "../../public/static/Global";

    export default {
        name: "Layout",
        watch: {
            $route() {
                console.log(this.$route.path)
            }

        },
        mounted() {

        },
        updated() {
            this.flagPic = this.$route.name;  // 判断首页图片
            // this.flagPic
            console.log(this.$route);
            // console.log(this.flagPic);
        },
        created() {
            // console.log('update');
            // console.log
            //  console.log('update');
            let path = window.location.href
            let i = path.lastIndexOf('/')
            if (i > 0) {
                path = path.substring(i + 1);
            }
            // console.log(path);
            this.backPic = path
            // console.log(this.$router.);
            // console.log('update');

            this.getUserInfo();  // 通过token获取用户信息
            this.getThumbsCount();


        },
        methods: {
            async handleCommand(command) {  // 下拉菜单
                if (command == 'a') {  // 个人信息
                    this.dialogVisible = true;

                } else if (command == 'b') { // 修改信息
                    this.dialogVisibleUpdate = true;
                    // console.log(this);
                } else if (command == 'c') {  // 退出登录
                    localStorage.removeItem('token')
                    this.$message.success('退出成功')
                    setTimeout(() => {
                        this.$router.go(0)  // 刷新页面
                    }, 500)
                } else if (command == 'd') {
                    const token = localStorage.getItem('token')
                    const obj = jwtDecode(token)
                    const {data: res} = await this.$http.put('/thumbs/' + obj.id)
                    this.thumbsvisabled = false;
                    // if (res)
                    this.$router.push('/love')  // 如果点击了，就要修改点赞数量的状态

                } else if (command == 'e') {
                    this.$router.push('/platform')  // 如果点击了，就要修改点赞数量的状态

                } else if (command == 'f') {
                    this.$router.push('/collection')  // 如果点击了，就要修改点赞数量的状态

                }
            },
            closeDia(formRef) { // 关闭修改框的会触发
                // console.log(2222);
                this.$refs[formRef].resetFields();

            }, submitForm(formRef) {  // 修改框的提交
                // console.log(formAddRef);
                this.$refs[formRef].validate(async (valid) => { // 前端校验
                        if (valid) {
                            const avatar = this.user.avatar
                            const i = avatar.lastIndexOf('/')
                            if (i > 0) {  // 说明是有完整的链接地址，也就是没有上传图片
                                const newAvatar = avatar.substring(i)
                                this.user.avatar = newAvatar;
                            }
                            const {data: res} = await this.$http.put('user', this.user)
                            console.log(res);
                            if (res.meta.status === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功'
                                })
                                const token = res.data;
                                localStorage.removeItem('token')  // 修改成功后重新获取token
                                localStorage.setItem('token', token);
                                // this.$forceUpdate()
                                setTimeout(() => {
                                    this.$router.go(0)
                                }, 800)

                                // localStorage.removeItem('token')
                                this.dialogVisibleUpdate = false;

                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.meta.msg
                                })
                                this.dialogVisibleUpdate = false;
                            }

                        } else {
                            this.$message({
                                type: 'error',
                                message: '请检查！'
                            })
                            return false;
                        }
                    }
                );

            },
            getUserInfo() {  // 通过token获取用户信息
                const token = localStorage.getItem('token')
                // console.log(token);
                const obj = jwtDecode(token)
                this.user = obj;
                this.user.avatar = Global.baseUrl + this.user.avatar
                this.flag = true;
                // console.log(this.user.avatar);

            },
            uploadEdit(respose, file, fileList) {  // 编辑分类上传成功的钩子
                this.user.avatar = respose.data;  // 上传成功后的名字
                // console.log(respose);
            },
            roll() {
                window.scrollTo({
                    top: 900,
                    behavior: 'smooth'
                })
            },
            userIndex() {  // 调用子组件的方法
                if (this.$route.name != 'Index') {
                    this.$message.error('请先跳转到首页再搜索')
                    this.$router.push('/index')
                    return


                }
                //     this.$router.push('/index')

                this.$refs.child.selectBlogAuthorById(1);
            },
            async getThumbsCount() {
                const token = localStorage.getItem('token')
                const obj = jwtDecode(token)
                const {data: res} = await this.$http.get('/blog/index/thumbscount/' + obj.id)
                // console.log(res)
                if (res.meta.status === 200) {  // 后台查询是查出来大于0就200
                    this.thumbsvisabled = true;
                    this.thumbsCount = res.data;
                } else {

                }
            }
        }
        ,
        data() {
            return {
                user: {  // 登录后返回的token的用户信息
                    id: "",
                    avatar: "",
                    nickname: "",
                    type: "",
                    location: "",
                    remark: "",
                    password: ""
                },
                keyWords: "",// 搜索关键字
                flag: false,  // 用来判断是否登录，继而展示响应的组件  true表示已经登录
                dialogVisible: false,   // 个人信息
                dialogVisibleUpdate: false, // 修改信息
                form: {  // 修改信息表单
                    username: "",

                    address: "",
                    password: "",
                    remark: ""
                },
                thumbsCount: 0,
                thumbsvisabled: false,  // thumbsCotnt为0就不显示
                activeIndex: "index",  // 导航栏的默认选中值,
                flagPic: "Index", // 用来判断是否为首页，展示背景图
                backPic: "Index",  // 二次保证，防止其它页面刷新，再展示背景图
                rules: {
                    username: [
                        {required: true, message: '请输入昵称', trigger: 'blur'},
                        // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入地址', trigger: 'blur'},
                        // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    password: [
                        // {required: true, message: '请输入密码', trigger: 'blur'},
                        // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    remark: [
                        {required: true, message: '请输入备注', trigger: 'blur'},
                        // {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-header {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .background-middle {
        position: absolute;
        left: 490px;
        z-index: 1000;
        width: 720px;
        height: 280px;
        /*background-color: pink;*/
        top: 200px;
    }

    .index-background {
        h1 {

        }

    }

    .ground {
        position: relative;
        width: 100%;
        height: 100vh;
        /*background-color: pink;*/
        background-image: url("https://api.dujin.org/bing/1920.php");
        /*background-image: url("../assets/background/1.jpg");*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #img:hover {
        transform: rotate(-360deg);
    }
</style>

